<template>
  <div class="h100">
    <div class="equipment-top" @click="gohome()">
      <img src="~@/assets/reception/logo.png" />
    </div>
    <div class="edit-department">
    <!-- <a-modal
      width="800px"
      :title="updateTitles"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :maskClosable="false"
      @ok="handleSubmit"
      @cancel="handleCancel"
    > -->
      <a-spin :spinning="spinning" tip="正在加载数据中...">
        <a-form :form="form">
          <a-row :gutter="10">
            <a-col :span="12">
              <a-form-item label="报修时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-date-picker
                  v-decorator="[
                    'NAME',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  :disabled-date="disabledStartDate"
                  show-time
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="Start"
                  @openChange="handleStartOpenChange"
                />
              </a-form-item>
            </a-col>
            <!-- fix: 修改时服务名称不能修改 -->
            <a-col :span="12">
              <a-form-item label="设备名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input
                  v-decorator="[
                    'NAME',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入设备名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="报修地点" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input
                  v-decorator="[
                    'NAME',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入报修地点"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="设备型号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input
                  v-decorator="[
                    'NAME',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入设备型号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="设备编号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input
                  v-decorator="[
                    'NAME',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入设备编号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="联系人" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input
                  v-decorator="[
                    'NAME',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入联系人"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="电话号码" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input
                  v-decorator="[
                    'NAME',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入电话号码"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="故障描述" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
                <a-textarea placeholder="请描述故障" :rows="10" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="验收要求" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
                <a-textarea placeholder="请输入验收要求" :rows="5" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    <!-- </a-modal> -->
  </div>
    <div class="equipment-bac-bottom">
      <img src="~@/assets/reception/background2.png" alt="" >
    </div>
  </div>
</template>

<script>
export default {
  name: 'RepairForm',
  components: {
  },
  data () {
    return {
      spinning: false,
    }
  },
  methods: {
    displayContent(text) {
      if ( text <= 100) {
        return text;
      }
      return text.substring(0, 100) + '...';
    },
    gohome() {
      this.$router.push({ path: '/reception/findServices/index' });
    },
  },
  mounted() {
  },
}
</script>

<style lang="less" scoped >
.equipment-top{
  height: 60px;
  background: #fff;
  padding: 10px 100px ;
  cursor: pointer;
  img{
    height: 40px;
    display: block;
  }
}
.edit-department{
  margin: 0 auto;
  width: 1600px;
}
.equipment-bac-bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
  img{
    height: 180px;
    width: 100%;
  }
}
</style>